<template>
<view class="">
		<shopro-login-modal></shopro-login-modal>
		<view class="joinRecord"  @click="junit('/pages/index/mangHeBox/allJoinList',{type : 2})">
			参与记录
		</view>
		
		<view class="page">
				<image class="bg" src="https://shiliu.gdxuanbao.com/bg.jpg" mode="widthFix"></image>
			
			<!-- 	<view class="title">
					<view class="icon">
						<u-icon name="arrow-left" @click="goBack()" size="40"></u-icon>
					</view>
					超级盲盒
				</view> -->
				
				<view class="content">
					<image class="content-bg" src="https://shiliu.gdxuanbao.com/box.png" mode="widthFix"></image>
					
					<view class="info">
						<view class="infoItem" @click="junit('/pages/prefile/my-balance/my-balance')">
							余额  {{amountObj.balance}}
						</view>
						<view class="infoItem"  @click="junit('/pages/prefile/shiLiuGuo/shiLiuGuo')">
							石榴果  {{amountObj.shiliuguo}}				
						</view>
					</view>
					<view class="goodsArr" v-if="waiting == true ? false : true">
						<view class="boxTips">
							参与开盒您有可能获得以下奖品
						</view>
						<view class="arrContent">
							<view class="goodItem" v-for="(item,index) in pageConfig.prize" :key="index">
								<image :src="item.thumb" mode=""></image>
								<text>{{item.name}}</text>
							</view>
						</view>
					</view>
					<view class="goodsArr" v-if="waiting == false ? false : true">
							<text class="tips">参与成功！等待开奖</text>
							<image class="bg-box" src="../../../static/images/index/tabItem1.png" mode="widthFix"></image>
					</view>
					<view class="peopleDesc">
						<view class="peopleDescImg" v-for="(item,index) in partic_avatar" :key="index">
							<image :src="item" mode=""></image>
						</view>
						{{pageConfig.participated_count}}人已参与，还差{{pageConfig.issuccess}}人开大奖
					</view>
					<view class="submitBtn" @click="luckyDraw">
						消耗{{pageConfig.balausta}}个石榴果参与
					</view>
					<view class="bottom-box">
						<view class="descBox">
										<view class="descLabelArr">
											<view @click="changeLabel(index)" :class="descActiveIndex==index ? 'descLabelItem activeItem' : 'descLabelItem'" v-for="(item,index) in descLabelArr" :key="index">
												{{item.label}}
											</view>
										</view>
										<view class="descContent" v-if="descActiveIndex==0">
											{{pageConfig.desc_content}}
										</view>
										<view class="descContent" v-if="descActiveIndex==2">
											<u-parse :html="pageConfig.activity_rule"></u-parse>
											<!-- {{pageConfig.activity_rule}} -->
										</view>
										<scroll-view scroll-y="true" style="height: 550rpx;"  v-if="descActiveIndex==1">
											<view class="arr" >
												<view class="arrItem" v-for="(item,index) in winerArr" :key="index">
													<image class="cover" :src="item.user.avatar" mode=""></image>
													<view class="infoDesc">
														<view class="name">
															{{item.user.nickname}}
														</view>
														<text>{{item.updated_at}}</text>
													</view>
													<view class="gift">
														{{item.str_name.str_name}}
													</view>
												</view>
											</view>
										</scroll-view>
										
										
									</view>
					</view>
					
				</view>
				
				<!-- 奖品模态框 -->
				<view class="bottomPopup"  v-if="show">
					<view class="popupContent">
						<image  class="tanchuangBg" src="http://shiliu.gdxuanbao.com/tanchuang.png" mode="widthFix"></image>
						<view class="contentItem">
							<view class="box" v-if="giftType == 0">
									<image  class="jifenIcon" src="../../../static/images/other/jifen.png" mode=""></image>
								<view class="jifenText" >{{giftObj.str_name}}</view>
							</view>
							
							<view class="youhuiquanBox" v-if="giftType == 1">
								<view class="left-box">
									<view class="price">
										<view class="mark"></view> <view class="num"></view>
									</view>
									<view class="desc" style="font-size: 35rpx;width: 100rpx;">
										商城购物优惠券
									</view>
								</view>
								<view class="right-box">
									<view class="name">
										{{giftObj.str_name}}
									</view>
									<view class="date">
										{{giftObj.coupon_time}}
									</view>
								</view>
							</view>
							
							<view class="youhuiquanBox" v-if="giftType == 2">
								<view class="cover">
									<!-- <image class="coverImg" src="../../../static/images/index/tabItem1.png" mode=""></image> -->
									<image class="coverImg" :src="giftObj.image" mode=""></image>
								</view>
								<view class="right-box">
									<view class="name">
										{{giftObj.str_name}}
									</view>
									<view class="date">
										{{giftObj.price}}
									</view>
								</view>
							</view>
							
						</view>
						<text>奖品已发放至您的账户，可在个人中心查看</text>
						<view class="btn" @click="show=false">
							好的
						</view>
					</view>
				</view>
				
				<bottomPopup  ref="confirmTip" :mode="mode">
					<view class="confirmTip">
						<view class="titleText">
							确认支付
						</view>
						<view class="text">
							确认消耗{{pageConfig.balausta}}石榴果参与开盒？
						</view>
						<view class="bottomBtn">
							<view class="btn" @click="this.$refs.confirmTip.show = false">
								取消
							</view>
							<view class="btn" @click="getGift()">
								确认
							</view>
						</view>
					</view>
				</bottomPopup>
				
				
				<u-toast ref="uToast" />
				
				
			</view>
		
</view>
	
</template>


<script>
import bottomPopup  from "@/components/bottom-popup/bottom-popup.vue"	
	
	export default {
		data() {
			return {
				descLabelArr:[
					{
						label:'盲盒详情',
					},
					{
						label:'中奖记录',
					},
					{
						label:'开盒规则',
					},
				],
				descActiveIndex : 0 ,	
				waiting: false,
				show: false,
				giftType: 2 ,//0 积分 1优惠券 2礼物
				mode : 'center',
				pageConfig:{},
				partic_avatar : [],//当前活动参与的人数
				winerArr:[],
				giftObj: undefined,
				amountObj : {
					balance : '',
					shiliuguo : '',
				},
			};
		},
		methods:{
			changeLabel(_index){
				this.descActiveIndex = _index
			},
			// 抽奖
			luckyDraw(){
				this.$refs.confirmTip.show = true
			},
			getGift(){
				// this.show = true
				this.$refs.confirmTip.show = false
				this.joinActive()
			},
			// 首页信息
			getPageData(){
				this.myHttp({
					data:{
						route : 'plugin.super-blind-box.api.super-blind-box.home',
					}
				}).then((res)=>{
					if(res.result== '1'){
						this.pageConfig = res.data
						this.partic_avatar = []
						this.partic_avatar = this.pageConfig.partic_avatar
						// 获取当期中奖信息
						this.chaneckWin()
						uni.stopPullDownRefresh()
						if(this.pageConfig.issuccess==0){
							this.winningGift(this.pageConfig.box_id)
						}
						
						
					}
				})
			},
			//  检查超级盲盒是否中奖
			winningGift (_box_id){
				this.myHttp({
					data:{
						route : 'plugin.super-blind-box.api.super-blind-box.super-detail',
						box_id : _box_id
					}
				}).then((res)=>{
					if(res.result== '1'){
						try{
							if(res.data.prize_log.name){
								let type = res.data.prize_log.type
								if(type==3){
									// 优惠券
									this.giftType = 1
								}else if(type==5){
									this.giftType = 2
								}else{
									this.giftType = 0
								}
								this.giftObj = res.data.prize_log.name
								this.show =true
							}
						}catch(e){
						}
					}
				})
			},
			// 中奖记录
			chaneckWin (){
				this.myHttp({
					data:{
						route : 'plugin.super-blind-box.api.super-blind-box.superPrizeLog',
						box_id : this.pageConfig.id
					}
				}).then((res)=>{
					if(res.result== '1'){
						this.winerArr = res.data.data
					}
				})
			},
			// 参与活动
			joinActive(){
				this.myHttp({
					data:{
						route : 'plugin.super-blind-box.api.super-blind-box.participate',
						super_id :  this.pageConfig.id,
					}
				}).then((res)=>{
					if(res.result == 1){
						this.$refs.uToast.show({
							title: '参与成功',
							type: 'success',
						})
						this.init()
					}else{
						uni.showToast({
							title: res.msg,
							icon : 'none',
						})
					}
				})
			},
			getMemberInfo(){
				this.myHttp({
					url:'/addons/yun_shop/api.php',
					data:{
						route : 'member.member.get-user-info',
					}
				}).then((res)=>{
					if(res.result== '1'){
						this.amountObj.balance = res.data.credit2 //余额
						this.amountObj.shiliuguo = res.data.credit3 //石榴果
					}
				})
			},
			init(){
				this.getPageData()
				this.getMemberInfo()
			}
			
		},
		onLoad() {
			this.init()
		},
		onPullDownRefresh(){
			this.init()
		},
		/**
		     * 分享当前页面
		     */
		onShareAppMessage() {
		    // 构建页面参数
		    return {
		    title: this.pageConfig.desc_title,
		    desc: this.pageConfig.desc_content,
		    // imageUrl: this.pageConfig.share_icon,
		    path: `/pages/prefile/supperBox/supperBox` ,
		    }
		},
		components:{
			bottomPopup,
		},
		filters:{
			
		},
	}
</script>

<style lang="scss" scoped>
.joinRecord{
	position: fixed;
	top: 23%;
	right: 2%;
	display: grid;
	place-items: center;
	color: #fff;
	background-color: #ffe086; 
	height: 80rpx;
	width: 200rpx;
	border-radius: 40rpx;
	z-index: 10;
}	
	
	
.confirmTip{
	width: 576rpx;
	height: 389rpx;
	background: #FFFFFF;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx;
	.titleText{
		font-size: 35rpx;
		font-weight: 600;
	}
	.text{
		flex: 1;
		display: grid;
		place-items: center;
		font-size: 30rpx;
	}
	.bottomBtn{
		display: flex;
		justify-content: space-between;
		width: 90%;
		.btn{
			width: 224rpx;
			height: 69rpx;
			background: #FF652E;
			border-radius: 10rpx;
			display: grid;
			color: #fff;
			place-items: center;
			&:nth-child(1){
				background: #fff;
				color: #AEB1BC;
				border: 2rpx solid #EEEEEE;
			}
		}
	}
}	
	
	
.bottomPopup{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.2);
	display: grid;
	place-items: center;
	// z-index: 10;
}
.popupContent{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	.tanchuangBg{
		width: 631rpx;
		height: 60vh;
		position: absolute;
		z-index: -1;
	}
	.contentItem{
		width: 550rpx;
		height: 260rpx;
		border-radius: 20px;
		margin-top: 280rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.youhuiquanBox{
			width: 483rpx;
			height: 158rpx;
			margin-top: 30rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			display: flex;
			.cover{
				padding: 20rpx 20rpx 0; 
				.coverImg{
					width: 114rpx;
					height: 114rpx;
					border-radius: 10rpx;
				}
			}
			.left-box{
				width: 171rpx;
				height: 100%;
				border-radius: 10rpx 0 0 10rpx;
				background: linear-gradient(0deg, #FF5113, #FF6731);
				color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: relative;
				&::after{
					content: '';
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: -9%;
					width: 33rpx;
					height: 33rpx;
					background: #FFFFFF;
					border-radius: 50%;
				}
				.price{
					font-size: 25rpx;
					width: 140rpx;
					display: flex;
					align-items: flex-end;
					.num{
						font-size: 60rpx;
					}
					.mark{
						margin-bottom: 10rpx;
					}
				}
				.desc{
					font-size: 21rpx;
				}
				
			}
			.right-box{
				height: 100%;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				padding-left: 25rpx;
				
				.name{
					font-size: 28rpx;
					color: #000;
				}
				.date{
					font-size: 28rpx;
					color: #888787;
				}
				
			}
		}
		.box{
			width: 483rpx;
			height: 158rpx;
			margin-top: 30rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
			.jifenIcon{
				position: absolute;
				top: 0;
				width: 60rpx;
				height: 60rpx;
				z-index: 10;
				margin: 30rpx 0 20rpx;
			}
			
			.jifenText{
				// width: 167rpx;
				height: 24rpx;
				margin-top: 50rpx;
				font-size: 25rpx;
				color: #F4BA55;
			}
			
			
		}
	}
	text{
		margin:36rpx 40rpx 75rpx;
		color: #FEFEFE;
		font-size: 24rpx;
	}
	.btn{
		width: 240rpx;
		height: 81rpx;
		background: #FF3327;
		border-radius: 41px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}
}	
	
	
	
.page{
	width: 100vw;
	position: relative;
	font-family: PingFang SC;
	.bg{
		width: 100vw;
		z-index: -1;
		position: absolute;
	}
	
	.title{
		height: 14vh;
		width: 100%;
		display: grid;
		place-items: center;
		position: relative;
		color: #FFFFFF;
		font-size: 31rpx;
		.icon{
			position: absolute;
			top: 45%;
			left: 3%;
		}
	}
	.content{
		// background-color: #ee7301;
		// background-color: pink;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.content-bg{
			width: 100%;
			z-index: -1;
			position: absolute;
		}
		.info{
			width: 100%;
			display: flex;
			justify-content: center;
			padding-top: 26%;
			.infoItem{
				width: 213rpx;
				height: 55rpx;
				background: #F8CE60;
				box-shadow: 0px 3rpx 8rpx 0px rgba(255, 199, 54, 0.41);
				border-radius: 28rpx;
				color: #C17E1E;
				display: grid;
				place-items: center;
			}
			&:nth-child(2) .infoItem{
				margin-left: 45rpx;
			}
		}
		
		.goodsArr{
			margin-top: 26rpx;
			// background-color: pink;
			width: 80%;
			height: 760rpx;
			.boxTips{
				display: flex;
				justify-content: center;
				align-items: flex-end;
				width: 100%;
				height: 80rpx;
				color: #FFE086;
			}
			.tips{
				font-size: 40rpx;
				color: #FFF3A4;
				margin-top: 80rpx;
			}
			.bg-box{
				width: 542rpx;
				height: 514rpx;
				box-shadow: -9px 18px 49px 2px rgba(151, 37, 7, 0.51);
			}
			.arrContent{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-evenly;
				margin-top: 20rpx;
				.goodItem{
					width: 185rpx;
					height: 211rpx;
					background: #FFFFFF;
					margin-bottom: 12rpx;
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					image{
						width: 120rpx;
						height: 120rpx;
						margin-bottom: 10rpx;
					}
				}
			}
			
		}
		.peopleDesc{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 90rpx;
			margin-bottom: 93rpx;
			width: 100%;
			color: #FF4F0A;
			position: relative;
				.peopleDescImg{
					width: 54rpx;
					height: 54rpx;
					border-radius: 50%;
					margin-right: 10rpx;
					image{
						width: 54rpx;
						height: 54rpx;
						border-radius: 50%;
					}
				}
			
		}
		.submitBtn{
			width: 579rpx;
			height: 100rpx;
			font-size: 35rpx;
			font-weight: bold;
			color: #FDF4B6;
			display: grid;
			place-items: center;
			background: #FF3802;
			border: 5rpx solid #FFE086;
			border-radius: 50rpx;
			box-shadow: 0px 3rpx 84rpx 0px rgba(255, 167, 41, 0.86);
		}
	
		.bottom-box{
			background: #ec6e00;
			width: 100vw;
			display: flex;
			justify-content: center;
		}
	
		.descBox{
			margin-top: 30rpx;
			width: 705rpx;
			height: 631rpx;
			background: #FFF3A4;
			box-shadow: 0px 1px 8px 0px rgba(204, 152, 18, 0.41);
			margin-bottom: 80rpx;
			border-radius: 20rpx;
			.descLabelArr{
				height: 82rpx;
				display: flex;
				background-color: pink;
				background-color: #FFA729;
				border-radius: 20rpx 20rpx 0 0;
				overflow: hidden;
				.descLabelItem{
					flex: 1;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.activeItem{
					background-color: #FFF3A4 !important;
					color: #FFA729 !important;
				}
			}
			.descContent{
				height: 349rpx;
				width: 100%;
				padding: 40rpx 30rpx;
				border-radius: 20rpx;
				line-height: 41rpx;
				font-size: 26rpx;
			}
			.arr{
				display: flex;
				flex-direction: column;
				width: 100%;
				padding: 0 18rpx;
				.arrItem{
					display: flex;
					align-items: center;
					width: 100%;
					height: 139rpx;
					border-bottom: 2rpx solid #F4CD92;
					.cover{
						margin-right: 20rpx;
						width: 84rpx;
						height: 84rpx;
						border-radius: 50%;
					}
					.infoDesc{
						flex: 1;
						display: flex;
						height: 80%;
						flex-direction: column;
						justify-content: space-between;
						.name{
							color: #000;
							font-size: 28rpx;
						}
						text{
							color: #999999;
						}
					}
					.gift{
						color: #E48E14;
					}
				}
			}
		}
	}
}
</style>
